<template>
    <div class="files flex font">
        <AsideVue></AsideVue>
        <div class="box" :class="{ 'w87': !store.state }">
            <NavVue></NavVue>
            <div class="flex brs ml-10 mt-10 pt-10 pr-10 mr-10 bg-fff">
                <div class="sidebar">
                    <el-menu unique-opened="true" class="el-menu-vertical-demo" active-text-color="#6193D2"
                        @select="selectMenu" @open="open" @close="close">
                        <!-- 经理 -->
                        <el-sub-menu v-if="type == 'boss'" v-for="item in fileList" :key="item.user_department_id"
                            :index="item.user_department_id + '.1'">

                            <template #title>
                                <span>{{ item.user_department_name }}</span>
                            </template>
                            <el-sub-menu v-for="userName in item.userGroup" :index="userName.user_group_id + '.2'"
                                class="group">
                                <template #title>
                                    <span>{{ userName.UserGroupName }}</span>
                                </template>
                                <el-menu-item v-for="name in userName.user" :key="name" :index="name.id + '.r'">{{
                                    name.name
                                }}
                                </el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <!-- 部门 -->
                        <el-sub-menu v-else-if="type == 'manager'" v-for="item in fileList"
                            :index="item.user_group_id + '.2'" class="group">
                            <template #title>
                                <span>{{ item.UserGroupName }}</span>
                            </template>
                            <el-menu-item v-for="name in item.user" :index="name.id + '.r'">{{
                                name.name
                            }}</el-menu-item>
                        </el-sub-menu>
                        <!-- 个人 -->
                        <div v-else-if="type == 'user'">
                            <p class="flex aic jc-c pb-5">{{ $t('main.myFiles') }}</p>
                            <el-menu-item :index="user.user_id + '.r'">{{ user.name }}</el-menu-item>
                        </div>

                    </el-menu>
                </div>
                <div class="rightBox pl-20 pr-20">
                    <div class="crumb flex aic jc-sb">
                        <div class="flex aic">
                            <p v-for="item in pathList"
                                @click="pathData(item.file_or_folder_name, item.file_path, item.files_id)"
                                class="pl-10 cp f14 flex aic"
                                :class="{ 'iconfont icon-Italic': item == '', 'fa5': pathList[pathList.length - 1] == item }">
                                {{ item.file_or_folder_name }}
                                <span class="ml-10 f14"
                                    :class="{ 'iconfont icon-xiangyoujiantou': pathList[pathList.length - 1] != item }"></span>
                            </p>
                        </div>
                        <div>
                            <span class="mr-20 fa5 f14">共{{ total || 0 }}条</span>
                            <el-radio-group v-model="radio" @change="changeRadio">
                                <el-radio :label="1">{{ $t('main.inquiry') }}</el-radio>
                                <el-radio :label="2">{{ $t('main.order') }}</el-radio>
                                <el-radio :label="3">{{ $t('main.client') }}</el-radio>
                                <el-radio :label="4">{{ $t('main.sipping') }}</el-radio>
                                <el-radio :label="5">{{ $t('main.pay') }}</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <fileDetails v-if="fileStatus" ref="details" :detalisList="detalisList" :userId="userId"
                        :user_id="user_id" :inquiryId="inquiryId" :orderId="orderId" :clientId="clientId" :sendId="sendId"
                        :payId="payId" :path="path" :md5='md5' :menuActivate="menuActivate" @userList="userList"
                        @crumbs="crumbs" @getTotal="getTotal" @newFile="newFile" @fileDel="fileDel">
                    </fileDetails>
                    <div v-else>
                        <Inquire v-if="types == 1" :user_id="user_id" @getTotal="getTotal" @getInquiryId="getInquiryId"
                            @detalisData="detalisData">
                        </Inquire>
                        <Order v-else-if="types == 2" :user_id="user_id" @getTotal="getTotal" @getorderId="getorderId"
                            @detalisData="detalisData"></Order>
                        <Client v-else-if="types == 3" :user_id="user_id" @getTotal="getTotal" @getClient="getClient"
                            @detalisData="detalisData"></Client>
                        <SendOut v-else-if="types == 4" :user_id="user_id" @getTotal="getTotal" @getSend="getSend"
                            @detalisData="detalisData"></SendOut>
                        <Pay v-else-if="types == 5" :user_id="user_id" @getTotal="getTotal" @detalisData="detalisData"
                            @getPay="getPay">
                        </Pay>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../api/index'
import AsideVue from '../components/Aside.vue';
import NavVue from '../components/Nav.vue';
import fileDetails from './components/fileDetails.vue';
import Inquire from './components/Inquire.vue';
import Order from './components/Order.vue';
import Client from './components/Client.vue';
import SendOut from './components/SendOut.vue';
import Pay from './components/Pay.vue';
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 获取数据数量
const total = ref('')
const getTotal = (value) => {
    total.value = value
}

// 获取文件菜单列表
const fileList = ref([])
const type = ref('')
const user = ref('')
const arrs = ref([])
const getFile = () => {
    const data = {
        token: store.token
    }
    $axios.$fileUser_department(data).then(res => {
        type.value = res.data.department_type
        if (res.data.department_type == "user") { //个人
            user.value = res.data
            arrs.value.push(res.data.user_id)
        } else if (res.data.department_type == "manager") {  //部门
            fileList.value = res.data.userGroup
            res.data.userGroup.forEach(arr => {
                arrs.value.push(...arr.user_num)
            })
        } else if (res.data.department_type == "boss") {  //经理
            fileList.value = res.data.list
            res.data.list.forEach(arr => {
                arr.userGroup.forEach(item => {
                    arrs.value.push(...item.user_num)
                })
            })
        }
        total.value = ''
        user_id.value = arrs.value
        // console.log(arrs.value)
    })
}

onMounted(() => {
    getFile()
})


const fileStatus = ref(true)

// 菜单展开回调
const detalisList = ref([])
const nameId = ref('')
const open = async (value) => {
    fileStatus.value = true
    radio.value = 0
    types.value = '' //清空
    inquiryId.value = '' //询盘id
    orderId.value = ''  //订单id
    clientId.value = '' //客户id
    sendId.value = '' //发货id
    payId.value = '' //支付id

    menuActivate.value = false
    pathList.value = ['']
    // console.log(details.value)
    details.value && details.value.openLoading() //开启加载
    details.value && details.value.clearSend()
    details.value && details.value.clear()
    details.value && details.value.clearPath()
    nameId.value = value || nameId.value
    userId.value = ''
    // console.log(value)
    if (nameId.value && nameId.value.includes('.1')) {  //一级菜单
        departmentId.value = nameId.value.split('.')[0]
        const data = {
            token: store.token,
            user_department_id: nameId.value.split('.')[0]
        }
        await $axios.$fileUser_department_file(data).then(res => {
            details.value && details.value.shutLoading()  //关闭加载
            size(res.data.userGroup)
            detalisList.value = res.data.userGroup.map(item => {
                return {
                    ...item,
                    isfolder: 0,
                }
            })
            res.data.userGroup.forEach(item => {
                user_id.value = item.user_num
            })
            // console.log(user_id.value)
        })
    } else if (nameId.value && nameId.value.includes('.2')) {  //二级菜单
        const data = {
            token: store.token,
            user_group_id: nameId.value.split('.')[0]
        }
        await $axios.$fileUser_group_file(data).then(res => {
            details.value && details.value.shutLoading()  //关闭加载
            size(res.data.user)
            detalisList.value = res.data.user
            user_id.value = res.data.user_num
        })
    }
    total.value = detalisList.value.length
}


// 菜单收起的回调
const departmentId = ref("")
const close = async (value) => {
    fileStatus.value = true
    radio.value = 0
    types.value = '' //清空
    inquiryId.value = ''
    orderId.value = ''
    clientId.value = ''
    sendId.value = ''
    payId.value = ''
    menuActivate.value = false
    details.value && details.value.openLoading() //开启加载
    details.value && details.value.clearSend()
    details.value && details.value.clearPath()
    details.value && details.value.clear()
    // pathList.value = ['']
    // user_id.value = []
    if (value && value.includes('.1')) {  //一级菜单
        details.value && details.value.shutLoading()  //关闭加载
        detalisList.value = [] 
        user_id.value = arrs.value
    } else if (value && value.includes('.2')) {  //二级菜单
        const data = {
            token: store.token,
            user_department_id: departmentId.value
        }
        if (departmentId.value) {
            await $axios.$fileUser_department_file(data).then(res => {
                details.value && details.value.shutLoading()  //关闭加载
                size(res.data.userGroup)
                detalisList.value = res.data.userGroup
                detalisList.value = res.data.userGroup.map(item => {
                    return {
                        ...item,
                        isfolder: 0
                    }
                })
                res.data.userGroup.forEach(item => {
                    user_id.value = item.user_num
                })
            })
        } else {
            user_id.value = arrs.value
            details.value && details.value.shutLoading()  //关闭加载
            // detalisList.value = []
        }
    }
    total.value = detalisList.value && detalisList.value.length
}

// 子组件数据
const detalisData = (value) => {
    fileStatus.value = true
    detalisList.value = value
}

// inquiry_id
const inquiryId = ref('')
const getInquiryId = (value, Uid) => {
    inquiryId.value = value
    userId.value = Uid
    // console.log(value,Uid)
}

// order_id
const orderId = ref('')
const getorderId = (value, Uid) => {
    orderId.value = value
    userId.value = userId.value || Uid
    // console.log(userId.value)
}

// Client
const clientId = ref('')
const getClient = (value, Uid) => {
    clientId.value = value
    userId.value = Uid
    // console.log(value,Uid)
}

// SendOut
const sendId = ref('')
const getSend = (value, Uid) => {
    sendId.value = value
    userId.value = Uid
    // console.log(value,Uid)
}

// Pay
const payId = ref('')
const getPay = (value, Uid) => {
    payId.value = value
    userId.value = Uid
    console.log(value)
}


// 面包屑
const pathList = ref([''])
const crumbs = (value) => {
    pathList.value = value
    // console.log(value)
}

// 点击子组件把内容添加到面包屑
// const pushCrumb = (value)=>{
//     pathList.value.push(value.inquiry_id)
//     console.log(value)
// }

// 点击面包屑触发
const path = ref()
const md5 = ref()
const pathData = (value, filePath, id) => {
    // console.log(path.value)
    if (value == undefined && userId.value == '' && !types.value) {
        open()
        // console.log('1')
        details.value.clearSend()
    } else if (types.value && value == undefined) {
        fileStatus.value = false
        // console.log('2')
    } else if (value == undefined && userId.value != '') {
        // console.log('2.2')
        path.value = ''
        md5.value = ''
        selectMenu()
    } else if (details.value.arrs && details.value.arrs.UserGroupName == value) {
        // console.log('3')
        // console.log(details.value.arrs.user)
        detalisList.value = details.value.arrs.user
        details.value.clearSend()
    } else if (details.value.storeName && details.value.storeName.file_or_folder_name == value) {
        // console.log('4')
        details.value.clearSend()
        details.value.row(details.value.storeName)
        path.value = ''
        md5.value = ''
    } else if (userId.value != '') {
        // console.log('5')
        details.value.getTable(value, filePath, id)
        details.value.changeFile(value, filePath)
        details.value.clearPath()
        // console.log(value)
        path.value = value
        md5.value = filePath
        // console.log(value)
    } else {
        console.log('6')
        // console.log(value)
        details.value.changeFile(value, filePath, id)
        path.value = value
        md5.value = filePath
        details.value.clearPath()
        details.value.getTable(value, filePath, id)
    }
    // console.log(storeName.value)
    const index = pathList.value.findIndex(item => {
        if (filePath) {
            return item.file_path == filePath
        } else {
            return item.file_or_folder_name == value
        }
    })
    pathList.value.splice(index + 1, 20)  //删除指定元素后面的元素
}

// 父组件触发子组件事件
const details = ref()

// 菜单激活回调
const userId = ref('')
const openId = ref('')
const menuActivate = ref(false)
const selectMenu = (value) => {
    // console.log(value)
    openId.value = value ? value.split('.')[0] : openId.value
    fileStatus.value = true
    radio.value = 0
    types.value = '' //清空
    pathList.value = ['']
    inquiryId.value = '' //询盘id
    orderId.value = ''  //订单id
    clientId.value = '' //客户id
    sendId.value = '' //发货id
    payId.value = '' //支付id
    // user_id.value = []
    details.value && details.value.openLoading() //开启加载
    details.value && details.value.clear() //清空
    details.value && details.value.clearPath()
    // console.log(value)
    const data = {
        token: store.token,
        user_open_id: openId.value
    }
    $axios.$fileUser_user_file(data).then(res => {
        // console.log(res)
        details.value && details.value.shutLoading()  //关闭加载
        size(res.data)
        details.value && details.value.changeRight() //改变状态显示上传按钮
        detalisList.value = res.data
        // detalisList.value = res.data.map(item=>{
        //     return {
        //         ...item,
        //         isfolder: 1
        //     }
        // })
        console.log(detalisList.value)
        userId.value = res.data[0] && res.data[0].user_id
        user_id.value = res.data[0] && res.data[0].user_id
        total.value = res.data.length
        menuActivate.value = true
    })
}

// 创建文件
const newFile = (val) => {
    val.size = val.size ? (val.size / 1024 / 1000).toFixed(2) + 'M' : '-'
    val.upload_time = val.upload_time || '-'
    detalisList.value.push(val)
    console.log(val)
}

// 删除文件
const fileDel = (val) => {
    let index = detalisList.value.findIndex(arr => arr.files_id == val)
    detalisList.value.splice(index, 1)
}


// 单选框
const types = ref('')
const user_id = ref([])
const radio = ref('')
const changeRadio = (value) => {
    // console.log(detalisList.value)
    types.value = value
    fileStatus.value = false
    pathList.value = ['']
    inquiryId.value = ''
    orderId.value = ''
    clientId.value = ''
    sendId.value = ''
    payId.value = ''
    path.value = ''
    md5.value = ''
    // console.log(user_id.value)
}


// 子组件调用
const userList = (value) => {
    size(value)
    detalisList.value = value
    total.value = value.length
    // console.log(value)
}

// 格式化日期文件
const size = (value) => {
    // console.log(value)
    if (Array.isArray(value))
        value.forEach(item => {
            item.size = item.size ? (item.size / 1024 / 1000).toFixed(2) + 'M' : '-'
            item.upload_time = item.upload_time || '-'
        })
}


</script>

<style lang="less" scoped>
@import './files.less';

.group {
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
}

// 滚动条美化
.group::-webkit-scrollbar {
    width: 5px;
}

.group::-webkit-scrollbar-thumb {
    background-color: rgb(212, 212, 212);
    border-radius: 5px;
}
</style>